<template>
  <div class="page_album">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多"
      :immediate-check="false"
      @load="onLoad"
    >
      <ul class="com">
        <li v-for="item in list" :key="item.trackid">
          <a :href="`#${item.url}`">
            <zhubo-item
              :uid="item.uid"
              :img="item.img"
              :pTitle="item.pTitle"
              :nickname="item.nickname"
              :url="item.url"
              :isVip="item.isVip"
              :tracks_counts="item.tracks_counts"
              :followers_counts="item.followers_counts"
              :albumCount="item.albumCount"
            ></zhubo-item>
          </a>
        </li>
      </ul>
      <template #loading>
        <div class="loading" >
          <van-loading color="#ff1e00" type="spinner" />
        </div>
      </template>
    </van-list>
    <!-- <div class="loading" v-if="!list.length">
          <van-loading color="#ff1e00" type="spinner" />
    </div> -->
    <my-footer v-if="list.length"></my-footer>
  </div>
</template>

<script>
import ZhuboItem from "@/views/search/searchcomp/ZhuboItem.vue";
import { initAllSearchData } from "@/request/api.js";
export default {
  name: "PageAlbum",
  data() {
    return {
      list: [],
      page: 1,
      rows: 20,
      category_id: "",
      // condition: "relation",
      paidFilter: false,
      fq: "is_paid:false",
      index:0,
      loading: true,
      finished: false,
    };
  },

  components: {
    ZhuboItem,
  },
  props: {
    kw: {
      type: String,
    },
    condition: {
      type: String,
    },
  },
  watch: {
    condition(){
      this.list = []
      this.loading = true
      this.finished = false
      this.page = 1
    
      this.initData()
    }
  },
  created() {
    this.initData();
  },

  methods: {
    async initData() {
      let params = {
        kw: this.kw,
        core: "user",
        page: this.page,
        rows: this.rows,
        condition: this.condition,
      };
      let { data: res } = await initAllSearchData(params);
      console.log("用户", res);
      let list = [];
      res.data.userViews.users.forEach((item) => {
        let obj = {
          url: item.url,
          uid: item.userInfo.uid,
          nickname: item.userInfo.nickname,
          fcounts: item.userInfo.followers_counts,
          img: item.userInfo.smallPic,
          pTitle: item.userInfo.pTtitle,
          isVip: item.userInfo.isVip,
          tracks_counts: item.userInfo.tracks_counts,
          followers_counts: item.userInfo.followers_counts,
          albumCount: item.statCountInfo.albumCount,
        };
        list.push(obj);
      });

      this.list.push(...list);

      this.loading = false;

      if (list.length == 0) {
        this.finished = true;
      }
    },

    onLoad() {
      this.page++;
      this.initData();
    },
  },
};
</script>

<style lang="scss" scoped>
.com {
  li {
    padding-left: 15px;
    a {
      display: block;
      border-bottom: 1px solid #e8e8ee;
    }
  }
}
 .loading{
     text-align: center;
 }

</style>

